<template>
  <div class="hello">
    <p>{{ $store.state.count }}</p>
    <p>{{ count }} - {{ name }}</p>
    <button @click="addClickHandle">增加</button>
    <button @click="decClickHandle">减少</button>
  </div>
</template>

<script>
import { mapState,mapMutations,mapActions } from "vuex";

export default {
  name: "HelloWorld",
  computed: {
    ...mapState(["count", "name"]),
  },
  methods:{
    ...mapMutations(["increment","decrement"]),
    ...mapActions(["asyncIncrement"]),
    addClickHandle(){
      // this.$store.commit("increment",10)
      // this.increment(10)
      // this.$store.dispatch("asyncIncrement",10)
      this.asyncIncrement(100)
    },
    decClickHandle(){
      // this.$store.commit("decrement",10)
      this.decrement(5)
    }
  }
};
</script>

